<!DOCTYPE html>
<html>
<body>
  <script>
  loaded_ids = new Array();
  </script>

  In the viewport images <br>
  <img id="atf_auto" src="images/fruit1.jpg?auto"
    onload="loaded_ids.push(this.id); console.log(this.id);">
  <img id="atf_lazy" src="images/fruit1.jpg?lazy" loading="lazy"
    onload="loaded_ids.push(this.id); console.log(this.id);">
  <img id="atf_eager" src="images/fruit1.jpg?eager" loading="eager"
    onload="loaded_ids.push(this.id); console.log(this.id);">

  <div style="height:11000px;"></div>
  Below the viewport images <br>
  <img id="btf_auto" src="images/fruit2.jpg?auto"
    onload="loaded_ids.push(this.id); console.log(this.id);">
  <img id="btf_lazy" src="images/fruit2.jpg?lazy" loading="lazy"
    onload="loaded_ids.push(this.id); console.log(this.id);">
  <img id="btf_eager" src="images/fruit2.jpg?eager" loading="eager"
    onload="loaded_ids.push(this.id); console.log(this.id);">
</body>
</html>
